/**
 * @summary plug
 */
import { Router } from 'express';
import * as path from 'path';
import * as jwt from 'jsonwebtoken';
import * as YAML from 'yamljs';
import Xlsx from '../../utils/xlsx/xlsx';
import Upload from '../../utils/upload/upload';
import * as fs from 'fs'
import * as cors from 'cors';

/**
 * @summary 测试接口
 */
let indexApi = Router().get('/', (req, res, next) => {
    // res.send({
    //     status: 401,
    //     msg: '无权限'
    // })
    res.json({
        testMsg: 123123
    });
});

/**
 * @summary jwt 测试接口
 */
 let indexJwtSignApi = Router().get('/', (req, res, next) => {
    console.log(req.query)
    let name = req.query.name;
    let config = YAML.load('config.yml');
    let token = jwt.sign({ name: name }, config['jwt'].secretKey, {
        expiresIn : "1h"
    });
    res.json({
        token: token
    });
});

/**
 * @summary phaser3 Demo index.html 模板接口
 */
 let indexPhaserDemo = Router().get('/', (req, res, next) => {
    fs.unlinkSync(path.resolve(__dirname,"../../public/phaser/dist/index.html"))
    fs.writeFileSync(path.resolve(__dirname,"../../public/phaser/dist/index.html"),
    `<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <!-- 浏览器的兼容模式 -->
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <!-- 视口 -->
            <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
            <!-- Cache-Control头域 -->
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
            <!-- 设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出 -->
            <meta http-equiv="Pragma" content="no-cache"/>
            <!-- 禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。 -->
            <meta content="telephone=no" name="format-detection"/>
            <!-- 删除默认的苹果工具栏和菜单栏 -->
            <meta content="yes" name="apple-mobile-web-app-capable"/>
            <!-- 控制状态栏显示样式 -->
            <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
            <style>
                .msg{
                    width: 100px;
                    word-wrap: break-word;
                    /* height: 100px; */
                    border:5px solid #ff0;
                    border-radius: 16px;
                    position: relative;
                    padding: 8px;
                    background: #333;
                    color: pink;
                }
                .msg::before{
                    content: '';
                    width: 0;
                    height: 0;
                    border: 20px solid;
                    position: absolute;
                    bottom: -41px;
                    left: 40px;
                    border-color:  gold transparent transparent;
                }
                .msg::after{
                    content: '';
                    width: 0;
                    height: 0;
                    border: 20px solid;
                    position: absolute;
                    bottom: -35px;
                    left: 40px;
                    border-color:  #333 transparent transparent;
                }
                .warn-left {
                    width: 10px;
                    height: 100%;
                    background-color: red;
                }
                .warn-top {
                    width: 100%;
                    height: 10px;
                    background-color: red;
                }
                .warn-right {
                    width: 10px;
                    height: 100%;
                    background-color: red;
                }
            </style>
            <title>phaser3.rpg</title>
        </head>
        <body>
            <div id="games-root"></div>
            <div id="games-input" style="opacity: 0;">
                <div style="display: flex;">
                    <input id="input" style="width: 100%; height: 100%;" type="text">
                    <button id="btn" style="background: rgb(30, 192, 30); font-weight: bold;">说</button>
                </div>
            </div>
            <div id="msg" class="msg" style="opacity: 0;"></div>
            <div id="text"></div>
            <div id="warn-left" class="warn-left" style="opacity: 0;"></div>
            <div id="warn-top" class="warn-top" style="opacity: 0;"></div>
            <div id="warn-right" class="warn-right" style="opacity: 0;"></div>

            <script>
                console.warn = function(){}

                setTimeout(() => {
                    document.documentElement.scrollTop = 0;
                    console.log(document.documentElement.scrollTop);
                },2000);

                document.documentElement.style.overflowY = 'hidden';
                document.documentElement.style.overflowX = 'hidden';
                document.getElementById('games-input').ontouchmove = function (e) {
                    e.preventDefault();
                };
                document.getElementById('msg').ontouchmove = function (e) {
                    e.preventDefault();
                };
                document.getElementById('text').ontouchmove = function (e) {
                    e.preventDefault();
                };
                document.getElementById('warn-left').ontouchmove = function (e) {
                    e.preventDefault();
                };
                document.getElementById('warn-top').ontouchmove = function (e) {
                    e.preventDefault();
                };
                document.getElementById('warn-right').ontouchmove = function (e) {
                    e.preventDefault();
                };
            </script>

            <script>
                (function () {
                    window.speak = function (_callback) {
                        document.getElementById('btn').onclick = () => {
                            if (document.getElementById('input').value) {
                                document.getElementById('msg').innerHTML = document.getElementById('input').value;
                                _callback(document.getElementById('input').value);
                                document.getElementById('input').value = '';
                            }
                        }
                    }
                })();
            </script>
            
            <script type="text/javascript" src="http://localhost:3001/phaser/dist/SpinePlugin.js"></script>
            <script defer src="http://localhost:3001/phaser/dist/runtime.js"></script>
            <script defer src="http://localhost:3001/phaser/dist/vendor.js"></script>
            <script defer src="http://localhost:3001/phaser/dist/index.js"></script>
        </body>
    </html>`)
    res.sendFile(path.resolve(__dirname,"../../public/phaser/dist/index.html"));
})

/**
 * @summary socket.io 测试接口
 */
let indexSocketApi = Router().get('/', (req, res, next) => {
    res.sendFile(path.resolve(__dirname,"../../public/socketTest.html"));
})

/**
 * @summary .xlsx 文件测试接口
 */
 let indexXlsxApi = Router().get('/', (req, res, next) => {
    let data: Buffer = Xlsx.fileSc();
    res.json({
        BufferData: data
    });
})

/**
 * @summary 上传 测试接口
 */
let indexUploadHtmlApi =  Router().get('/', (req, res, next) => {
    res.sendFile(path.resolve(__dirname,"../../public/uoloadTest.html"));
})

/**
 * @summary 上传 测试接口
 */
let upload = Upload.upload();
let indexUploadApi = Router().post('/', upload.single('username'), (req, res, next) => {
    console.log('文件上传', req.file);
    res.json({
        msg: 'ok'
    })
})

export {
    indexApi,
    indexJwtSignApi,
    indexSocketApi,
    indexXlsxApi,
    indexUploadApi,
    indexUploadHtmlApi,
    indexPhaserDemo
}